<template>
  <v-layout type="main">
    <div class="alike-lis-header">
      <div class="lis-header-left">
        <div class="add-btn" @click="$router.push({ path: '/product/detail' })">+ 新增</div>

        <div class="search-box">
          <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="" @input="getData" />
        </div>
      </div>
    </div>

    <el-table :data="tableData">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="gpu_model_type" label="GPU类型" />
      <el-table-column prop="gpu_model.model" label="GPU型号" />
      <el-table-column prop="gpu_num" label="GPU(个)" />
      <el-table-column prop="gpu_model_use_rate" label="GPU使用率" />
      <el-table-column prop="gpu_model_mem" label="GPU显存使用量" />
      <el-table-column prop="mem_num" label="内存(Mi)" />
      <el-table-column prop="cpu_num" label="CPU(毫核)" />
      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column prop="name" label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="put(row)">修改</el-button>

          <el-popover placement="top" width="80" trigger="click" v-model="row.visible">
            <p>您确定要删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="del(row)">确定</el-button>
            </div>
            <el-button slot="reference" type="text">
              <i class="el-icon-delete delete-btn" />
              删除
            </el-button>
          </el-popover>

        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum" @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>
  </v-layout>
</template>

<script>
import { getProducts, delProduct } from '@/api/product'
export default {
  data() {
    return {
      tableData: [],
      Pagedata: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  async created() {
    this.getData()
  },
  destroyed() {

  },
  methods: {
    async getData() {
      let res = await getProducts({ ...this.Pagedata })
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    async del({ id }) {
      await delProduct({ id })
      this.getData()
    },
    put({ id }) {
      this.$router.push({
        path: '/product/detail',
        query: { id }
      })
    },
    handleCurrentChange(val) {
      this.Pagedata.pageNum = val
      this.getData()
    },
  }
}
</script>
<style lang="less" scoped></style>
